import React, { Component } from 'react'
import { Link, Route } from 'react-router-dom'
import Detail from './Detail'
export default class Message extends Component {
    state = {
        messageArr:[
            {id:'01',title:'消息1'},
            {id:'02',title:'消息2'},
            {id:'03',title:'消息3'},
        ]
    }
    pushShow=(id,title)=>{
// 1.push跳转 + 携带params参数
// this.props.history.push(`/home/message/detail/${id}/${title}`)

// 2.push跳转 + 携带search参数
// this.props.history.push(`/home/message/detail?id=${id}&title=${title}`)

// 3.push跳转 + 携带state参数
this.props.history.push(`/home/message/detail`,{id:id,title:title})
    }
    replaceShow=(id,title)=>{
      // 1.replace跳转 + 携带params参数
      // this.props.history.replace(`/home/message/detail/${id}/${title}`)

      // 2.replace跳转 + 携带search参数
// this.props.history.replace(`/home/message/detail?id=${id}&title=${title}`)

// 3.replace跳转 + 携带state参数
this.props.history.replace(`/home/message/detail`,{id:id,title:title})
      
    }
  render() {
    const {messageArr} = this.state
    return (
        <div>
        <ul>
            {
messageArr.map((item)=>{
return ( <li key={item.id}>
    {/*1. 向路由组件传递param参数 */}
    {/* <Link to={`/home/message/detail/${item.id}/${item.title}`}>{item.title}</Link>
&nbsp;<button onClick={()=>{this.pushShow(item.id,item.title)}}>push查看</button>
&nbsp;<button onClick={()=>{this.replaceShow(item.id,item.title)}}>replace查看</button> */}

     {/*2. 向路由组件传递search参数 */}
     {/* <Link to={`/home/message/detail?id=${item.id}&title=${item.title}`}>{item.title}</Link>
     &nbsp;<button onClick={()=>{this.pushShow(item.id,item.title)}}>push查看</button>
&nbsp;<button onClick={()=>{this.replaceShow(item.id,item.title)}}>replace查看</button> */}

 {/*3. 向路由组件传递state参数  */}
     <Link to={ {pathname:'/home/message/detail',state:{id:item.id,title:item.title}}}>{item.title}</Link>
     &nbsp;<button onClick={()=>{this.pushShow(item.id,item.title)}}>push查看</button>
&nbsp;<button onClick={()=>{this.replaceShow(item.id,item.title)}}>replace查看</button>

  </li>)
})
            }
         
          
        </ul>
        <hr />
{/* 1.声明接收params参数 */}
       {/* <Route path='/home/message/detail/:id/:title' component={Detail} /> */}

       {/* 2.search参数 无需声明接收 正常注册路由即可 */}
       {/* <Route path='/home/message/detail' component={Detail} /> */}

{/* 3.路由的state参数 无需声明接收 正常注册路由即可 */}
<Route path='/home/message/detail' component={Detail} />

      </div>
    )
  }
}
